<script setup>
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'

const userStore = useUserStore()
const router = useRouter()

const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}

onMounted(() => {
  // 如果有token但没有用户信息，尝试获取用户信息
  if (userStore.token && !userStore.user) {
    userStore.getUserInfo()
  }
})
</script>

<template>
  <div class="app">
    <nav class="navbar">
      <div class="container">
        <router-link to="/" class="logo">
          <img src="@/assets/logo.png" alt="Logo">
        </router-link>
        <div class="nav-links">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/scams" class="nav-link">骗子列表</router-link>
          <template v-if="userStore.token">
            <router-link to="/publish" class="nav-link">发布信息</router-link>
            <template v-if="userStore.userRole === 'admin'">
              <router-link to="/admin" class="nav-link">管理后台</router-link>
            </template>
            <a href="#" class="nav-link" @click.prevent="handleLogout">退出</a>
          </template>
          <template v-else>
            <router-link to="/login" class="nav-link">登录</router-link>
            <router-link to="/register" class="nav-link">注册</router-link>
          </template>
        </div>
      </div>
    </nav>
    <main class="main-content">
      <div class="router-container">
        <router-view></router-view>
      </div>
    </main>
    <footer class="footer">
      <div class="container">
        <p>&copy; 2024 骗子信息查询系统. All rights reserved.</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.navbar {
  background-color: var(--secondary-color);
  padding: 1rem 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}

.logo img {
  height: 40px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-link {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--primary-color);
}

.main-content {
  flex: 1;
  width: 100%;
  margin-top: 72px;
  padding: 0;
  min-height: calc(100vh - 72px - 80px - 30px); /* 增加30px底部边距 */
  margin-bottom: 30px; /* 添加底部外边距 */
}

.main-content :deep(.container) {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.main-content :deep(.el-container) {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.main-content :deep(.el-main) {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.main-content :deep(section .container) {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.main-content :deep(.hero) {
  padding: 0;
  margin: 0;
}

.main-content :deep(.features) {
  padding: 0;
  margin: 0;
}

.main-content :deep(.latest-scams) {
  padding: 0;
  margin: 0;
}

.router-container {
  padding-bottom: 30px; /* 添加底部内边距 */
}

.footer {
  background-color: var(--secondary-color);
  color: var(--text-light);
  padding: 1.5rem 0;
  width: 100%;
}

.footer .container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .main-content {
    margin-top: 120px;
  }

  .footer .container {
    padding: 0 1rem;
  }
}
</style>
